<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quasar Multi-Level Menu</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quasar@1.20/dist/quasar.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="app">
    <!-- 触发按钮 -->
    <q-btn @click="showMenu = !showMenu" label="Open Menu" />

    <!-- 一级菜单 -->
    <q-menu v-show="showMenu" anchor="top right" self="top left">
        <q-list>
            <!-- 递归渲染菜单项 -->
            <menu-item v-for="topic in topics" :key="topic.topicid" :topic="topic"></menu-item>
        </q-list>
    </q-menu>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.20/dist/quasar.umd.min.js"></script>
<script>
    Vue.use(Quasar);

    Vue.component('menu-item', {
        props: ['topic'],
        template: `
          <div>
            <q-item class="menu-item q-py-xs items-center" clickable v-if="topic.children.length">
              <img src="https://uploads-ssl.webflow.com/657c661418a503e0b43c9905/6582ea532471af5d4bcf5575_wenjianjia.svg" class="icon">
              <div class="texttopic" @click.stop="showAlert(topic.topictitle)">{{ topic.topictitle }}</div>
              <q-icon name="chevron_right" class="toggle-icon" @click="toggle" right />
              <q-menu v-show="showSubmenu" anchor="top right" self="top left">
                <q-list>
                  <menu-item v-for="child in topic.children" :key="child.topicid" :topic="child"></menu-item>
                </q-list>
              </q-menu>
            </q-item>
            <q-item class="menu-item q-py-xs items-center" clickable v-else @click="showAlert(topic.topictitle)">
              <img src="https://uploads-ssl.webflow.com/657c661418a503e0b43c9905/6582ea532471af5d4bcf5575_wenjianjia.svg" class="icon">
              <div class="texttopic">{{ topic.topictitle }}</div>
            </q-item>
          </div>
        `,
        data() {
            return {
                showSubmenu: false
            };
        },
        methods: {
            toggle() {
                this.showSubmenu = !this.showSubmenu;
            },
            showAlert(title) {
                alert('主题: ' + title);
                // Optionally call toggle if you want to open submenu after alert
            }
        }
    });

    new Vue({
        el: '#app',
        data() {
            return {
                showMenu: false,
                topics: []
            };
        },
        created() {
            var topicsStr = '{"topics":[{"topicid":"oPK2V6h12izQKY6X42Mv7JkB4p081714660824749","topictitle":"测试主题1测试主题1测试主题1测试主题1测试主题1","edittime":"2024-05-13 10:04:35","createtime":"2024-05-02 14:40:24","topicname":"测试主题1","children":[],"order":"oPK2V6h12izQKY6X42Mv7JkB4p081714717514277,oPK2V6h12izQKY6X42Mv7JkB4p081715439923985,oPK2V6h12izQKY6X42Mv7JkB4p081714726179496,oPK2V6h12izQKY6X42Mv7JkB4p081715439909720"},{"topicid":"oPK2V6h12izQKY6X42Mv7JkB4p081714467449619","topictitle":"测试主题2","edittime":"2024-05-13 10:05:43","createtime":"2024-04-30 08:57:29","topicname":"测试主题2","children":[],"order":"oPK2V6h12izQKY6X42Mv7JkB4p081715354934141,oPK2V6h12izQKY6X42Mv7JkB4p081714467699284,oPK2V6h12izQKY6X42Mv7JkB4p081714579381599,oPK2V6h12izQKY6X42Mv7JkB4p081715395726664,oPK2V6h12izQKY6X42Mv7JkB4p081715354943555,oPK2V6h12izQKY6X42Mv7JkB4p081714717514277,oPK2V6h12izQKY6X42Mv7JkB4p081714726179496,oPK2V6h12izQKY6X42Mv7JkB4p081715439909720,oPK2V6h12izQKY6X42Mv7JkB4p081715439923985"},{"topicid":"oPK2V6h12izQKY6X42Mv7JkB4p081714384401615","topictitle":"测试主题3","edittime":"2024-05-13 10:06:03","createtime":"2024-04-29 09:53:21","topicname":"测试主题3","children":[{"topicid":"oPK2V6h12izQKY6X42Mv7JkB4p081714277615370","topictitle":"测试2211","edittime":"2024-04-28 15:31:40","createtime":"2024-04-28 04:13:35","topicname":"测试2211","children":[]},{"topicid":"oPK2V6h12izQKY6X42Mv7JkB4p081714277615370","topictitle":"测试2222","edittime":"2024-04-28 15:31:40","createtime":"2024-04-28 04:13:35","topicname":"测试2222","children":[]},{"topicid":"oPK2V6h12izQKY6X42Mv7JkB4p081714277615370","topictitle":"测试22332","edittime":"2024-04-28 15:31:40","createtime":"2024-04-28 04:13:35","topicname":"测试2233","children":[{"topicid":"oPK2V6h12izQKY6X42Mv7JkB4p081714277615370","topictitle":"测试2233","edittime":"2024-04-28 15:31:40","createtime":"2024-04-28 04:13:35","topicname":"测试2233","children":[]},{"topicid":"oPK2V6h12izQKY6X42Mv7JkB4p081714277615370","topictitle":"测试22331","edittime":"2024-04-28 15:31:40","createtime":"2024-04-28 04:13:35","topicname":"测试2233","children":[]}]}]},{"topicid":"oPK2V6h12izQKY6X42Mv7JkB4p081714318258879","topictitle":"测试主题4","edittime":"2024-05-13 10:06:12","createtime":"2024-04-28 15:30:58","topicname":"测试主题4","children":[{"topicid":"oPK2V6h12izQKY6X42Mv7JkB4p081714277615370","topictitle":"测试223","edittime":"2024-04-28 15:31:40","createtime":"2024-04-28 04:13:35","topicname":"测试223","children":[]}]}],"order":"oPK2V6h12izQKY6X42Mv7JkB4p081714660824749,oPK2V6h12izQKY6X42Mv7JkB4p081714467449619,oPK2V6h12izQKY6X42Mv7JkB4p081714384401615,oPK2V6h12izQKY6X42Mv7JkB4p081714318258879","personalImg":"https://qijieimages.oss-cn-shanghai.aliyuncs.com/images/image_1715595334804_1801.jpg","vipdate":"2024-06-06","user":{"name":"小a","email":"2293406120@qq.com","sign":"4444000"}}'
            this.topics = JSON.parse(topicsStr).topics;
        }
    });
</script>
</body>
</html>
<style>
    .icon {
        height: 20px; /* 或根据需要调整大小 */
        width: 20px; /* 或根据需要调整大小 */
        vertical-align: middle; /* 使图标和文本对齐 */
        margin-right: 5px; /* 添加一些右边距 */
    }
</style>
<style>
    .menu-item {
        width: 100%;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .texttopic {
        width: 180px;
        max-width: 180px; /* 或其他合适的宽度 */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .q-menu{
        width: 180px;
    }
    .toggle-icon {
        cursor: pointer; /* 可选，让用户知道这是可点击的 */
    }
</style>